<template>
  <div class="modalStyle">
    <div class="header">
      <div class="header_search">
        <el-input v-model="search" placeholder="请输入内容" :clearable="true"></el-input>
        <el-button @click="selectFunc" icon="el-icon-search" class="search_icon"></el-button>
      </div>

         <ul class="ulstyle">
           <li style="font-size: 14px; font-weight: 600">角色领域：</li>
           <li v-for="(item,index) in roleList"
               :key="index"
               @click="changeRolefunc(index)"
               :class="[roleListActived==index?'ulstyle_color':'']"
             >
             {{item.name}}
           </li>
         </ul>

        <ul class="ulstyle">
          <li style="font-size: 14px; font-weight: 600">项目类型：</li>
          <li v-for="(item,index) in projectList" :key="index"
              @click="changeTypefunc(index)"
              :class="[projectListActived==index?'ulstyle_color':'']">
            {{item.name}}
          </li>
        </ul>

        <ul class="ulstyle">
          <li style="font-size: 14px; font-weight: 600">项目周期：</li>
          <li v-for="(item, index) in projectTimeList"
              :key="index"
              @click="changeTimefunc(index)"
              :class="[projectTimeListActived==index?'ulstyle_color':'']">
            {{item}}
          </li>
        </ul>
      <ul class="ulstyle">
        <li style="font-size: 14px; font-weight: 600">定价方式：</li>
        <li v-for="(item,index) in projectMoneyWayList"
            :key="index"
            @click="changeMoneyWayfunc(index)"
            :class="[projectMoneyWayListActived==index?'ulstyle_color':'']"
        >
          {{item}}
        </li>
      </ul>
      <ul class="ulstyle">
        <li style="font-size: 14px; font-weight: 600">金额预算：</li>
        <li v-for="(item,index) in projectMoneyList"
            :key="index"
            @click="changeMoneyfunc(index)"
            :class="[projectMoneyListActived==index?'ulstyle_color':'']"
        >
          {{item}}
        </li>
      </ul>
    </div>

     <ul class="content_box">
       <li v-for="(item,index) in projectContentList" :key="index" class="content_box_list">
         <div class="left_content">
           <img v-if="item.img" :src="item.img">
           <img v-else src="@/assets/2.jpg" >
         </div>
         <div class="right_content">
           <div class="right_content_top">
             <span>项目名称：{{item.name}}</span>
           </div>
           <div class="right_content_content">
             <span>类型：{{item.cycle}}</span>
             <span>技术栈：</span>
             <span v-for="(itemdeve,indexdeve) in item.developer" :key="indexdeve">{{itemdeve}}</span>
           </div>
           <div class="right_content_bottom">
            <span>
              发布于{{item.startTime}}小时|{{item.applicantspeo}}报名</span>
           </div>
         </div>
         <div class="content_money">
           ￥{{item.money}}
         </div>
       </li>
     </ul>
    <div class="block">
<!--      <span class="demonstration">显示总数</span>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        background
        layout="total, prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
name:'index',
  data(){
  return {
    currentPage1: 5,
    roleListActived:0,
    projectListActived:0,
    projectTimeListActived:0,
    projectMoneyListActived:0,
    projectMoneyWayListActived:0,
    search:'',
    activeName:'second',
    roleList:[
      {name:'前端开发',label:'1'},
      {name:'后端开发',label:'2'},
      {name:'测试工程师',label:'3'},
      {name:'前端开发',label:'4'},
      {name:'后端开发',label:'5'},
      {name:'测试工程师',label:'6'},
      {name:'全栈工程师',label:'7'}],
    projectList:[{name:'web网页',label:'1'},
                 {name:'APP开发',label:'2'},
                 {name:'微信公众号',label:'3'},
                 {name:'小程序',label:'4'},
                 {name:'其他',label:'6'}],
    projectContentList:[
      {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['java','c++'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10,state:1},
      {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['vue'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10,state:1},
      {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['php'],type:'web网页',cycle:'45天',money:'投标',startTime:'2个小时前',applicantspeo:10,state:1}
      ],
    projectTimeList:['30天内','30天~60天','90天'],
    projectMoneyList:['1~100','100~300','300~500','500~1000'],
    projectMoneyWayList:['商家定价','投标']
  }
},
methods:{
  changeMoneyWayfunc(index){
    this.projectMoneyWayListActived = index
  },
  // 分页
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  },
  changeMoneyfunc(index){
    this.projectMoneyListActived = index
  },
  changeTimefunc(index){
    this.projectTimeListActived = index
  },
  changeTypefunc(index){
    this.projectListActived = index
  },
  changeRolefunc(index){
    console.log(index)
    this.roleListActived = index
  },
  handleClick(tab, event) {
    console.log(tab, event);
  },
  selectFunc(){
    console.log('selection',this.$axios)
    // 发送请求
    this.$ajax({
      url:'',
      method:{},
      data:{search:this.search}
    }).then(res=>{
      console.log(res,'res')
    }).catch()
  }
}
}
</script>

<style lang="less" scoped>
  .content{
    width: 78vw;
    margin: 0 auto;
  }
/*.el-popover{*/
/*  background: red;*/
/*}*/
  .ulstyle_color{
    color: skyblue!important;
  }
  .content_box_list{
    width: 100%;
    /*height: 60px;*/
    overflow: hidden;
    background-color: white;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 5px;
    margin: 10px auto;
    position: relative;
    display: flex;
    box-sizing: border-box;
 border-bottom: 1px solid #ccc;
    align-items: center;
    .left_content{
      width: 70px;
      height: 70px;
      display: flex;
      /*align-content: center;*/
      /*position: absolute;*/
      /*transform: translate(0,-50%);*/
      img{
        width: 100%;
        height: 100%;
      }
    }
    .right_content{
      flex:1;
      padding-right: 50px;
      padding-left: 40px;
      font-size: 14px;
      /*background-color: skyblue;*/
      .right_content_top{
        width: 100%;
        height: 30px;
        line-height:30px;
        font-weight: 600;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break:break-all;
      }
      .right_content_content{
        width: 100%;
        height: 30px;
        line-height: 30px;
      }
      .right_content_bottom{
        width: 100%;
        height: 30px;
        color: rgb(150,195,232);
        font-size: 12px;
        line-height: 30px;
      }
    }
    .content_money{
      /*width: 40px;*/
      position: absolute;
      right: 7px;
      top: 50%;
      transform: translate(0,-50%);
    }
  }
.header_search{
  position: relative;
  width: 50%;
  margin: 0 auto;
}
  .modalStyle{
    width: 100%;
    height: 100%;
    background-color: rgb(240,242,245);
    overflow: hidden;
  }
.header{
 position: relative;
 width: 78vw;
  /*height: 30%;*/
  box-sizing: border-box;
  background-color: white;
  padding: 10px;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 10px;
}
.content{
  width: 78%;
  height: 400px;
  margin: 0 auto;
  /*background: skyblue;*/
  margin-top: 10px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}
  .search_icon{
    position: absolute;
    top: 0;
    right: 0;
  }
  /deep/ .el-input--suffix .el-input__inner{
    padding-right: 57px;
  }
   .el-input{
    /*width: 50%;*/
     margin: 0 auto;
  }
  .ulstyle{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 13px;
    /*font-weight: 600;*/
    li{
      width: 15%;
      margin: 2px;
    }
  }
.content_box{
  width: 78vw;
  /*background-color: white;*/
  margin-top: 10px;
  border-radius: 10px;
  margin: 0 auto;
  padding: 0;
}
  .block{
    display: flex;
    position: fixed;
    bottom: 5px;
    width: 78vw;
    /*background: rebeccapurple;*/
    left: 50%;
    transform: translate(-50%);
    justify-content: flex-end;
  }
</style>
